<template>
<div class="app-container">
<el-card shadow="never" class="panel">
<div slot="header" class="panel__header"><i class="el-icon-tickets panel__icon"></i><div class="panel__title">数据库浏览</div></div>


<el-row :gutter="12">
<el-col :md="6" :sm="24">
<el-card shadow="never" class="h-card">
<div slot="header">数据库</div>
<el-menu :default-active="db" class="full">
<el-menu-item v-for="d in dbs" :key="d" :index="d" @click="selectDb(d)">{{ d }}</el-menu-item>
</el-menu>
</el-card>
</el-col>
<el-col :md="6" :sm="24">
<el-card shadow="never" class="h-card">
<div slot="header">数据表</div>
<el-scrollbar class="full">
<el-menu :default-active="table">
<el-menu-item v-for="t in tables" :key="t" :index="t" @click="selectTable(t)">{{ t }}</el-menu-item>
</el-menu>
</el-scrollbar>
</el-card>
</el-col>
<el-col :md="12" :sm="24">
<el-card shadow="never" class="h-card">
<div slot="header">数据行</div>
<el-table :data="rows" border stripe height="420">
<el-table-column v-for="c in cols" :key="c" :prop="c" :label="c" :min-width="120"/>
</el-table>
</el-card>
</el-col>
</el-row>
</el-card>
</div>
</template>


<script>
import request from '@/utils/request'
export default { name:'DatabaseView', data(){ return{ dbs:[], tables:[], rows:[], cols:[], db:'', table:'' } }, methods:{ async mountedFetch(){ const res= await request({ url:'/db/list', method:'get' }); this.dbs=res.data||[] }, async selectDb(d){ this.db=d; const res= await request({ url:'/db/tables', method:'get', params:{ db:d } }); this.tables=res.data||[]; this.table=''; this.rows=[]; this.cols=[] }, async selectTable(t){ this.table=t; const res= await request({ url:'/db/rows', method:'get', params:{ db:this.db, table:t } }); const data=res.data||[]; this.rows=data; this.cols= data.length? Object.keys(data[0]):[] } }, mounted(){ this.mountedFetch() } }
</script>


<style scoped>
.panel{ border:1px solid #ebeef5 }
.panel__header{ display:flex; align-items:center; gap:8px }
.panel__icon{ color:#5d86ff }
.h-card{ height: 480px }
.full{ height: 420px; overflow:auto }
</style>